﻿@page
@model IndexModel
@{
    ViewData["Title"] = "数据";
}

<div id="app" style="height:550px; ">
    <div style="width: 30%; float: left; ">
        <el-upload class="upload-demo"
                   style="text-align:center;"
                   drag
                   action="/api/startup-server/import-data"
                   :on-change="handleChange"
                   multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            @* <div class="el-upload__tip" slot="tip">上传文件</div> *@
        </el-upload>
    </div>

    <div style="width: 70%; float: left;">
        <el-table :data="resultData.data"
                  style="width: 100%">
            <el-table-column prop="carNo" label="车牌号"></el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @@size-change="handleSizeChange"
                           @@current-change="handleCurrentChange"
                           :current-page="inputData.pageIndex"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="inputData.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="resultData.total">
            </el-pagination>
        </div>
    </div>

</div>
<script>
    var vueApp = undefined;
    var vm = new Vue({
        el: '#app',
        data: function () {
            vueApp = this;
            return {
                resultData: {
                    total: 10,
                    data: []
                },
                inputData: {
                    pageIndex: 1,
                    pageSize: 10
                }
            };
        },
        filters: {

        },
        created() {
            vueApp.GetCarNoPage();
        },
        methods: {
            GetCarNoPage() {
                axios.post('/api/startup-server/car-no-page', vueApp.inputData).then(function (response) {
                    vueApp.resultData.data = response.data.data;
                    vueApp.resultData.total = response.data.total;
                }).catch(function (error) {
                    console.log(error);
                });
            },

            handleSizeChange(val) {
                vueApp.inputData.pageSize = val;
                vueApp.GetCarNoPage();
            },
            handleCurrentChange(val) {
                vueApp.inputData.pageIndex = val;
                vueApp.GetCarNoPage();
            },
            handleChange(file, fileList) {
                if (file.status == "success") {
                    vueApp.GetCarNoPage();
                    this.$message({
                        message: '导入成功',
                        type: 'success'
                    });
                }
            }
        }

    });
</script>